<template>
	<view class="class">
		<u-navbar :border-bottom="false" title="班级信息"></u-navbar>
		<view class="info acea-row row-column">
			<view class="item title">{{info.name}}</view>
			<view class="item acea-row row-middle">
				<text>关联课程</text>
				<text>{{info.kecheng[0].name}}</text>
			</view>
			<view class="item acea-row row-middle">
				<text>上课教室</text>
				<text>{{info.jiaoshi}}</text>
			</view>
			<view class="item acea-row row-middle">
				<text>人数/容量</text>
				<text>{{info.stu_count}}/{{info.rongliang}}</text>
			</view>
		</view>
		<u-tabs :list="tabList" :is-scroll="true" :current="tabCurrent" @change="e=>tabCurrent=e" font-size="28" bar-width="32" bar-height="8" active-color="#1661FF" :bar-style="{borderRadius:'8rpx',background:'linear-gradient(90deg,#1661ff 0%, rgba(22,97,255,0.00) 100%);'}"></u-tabs>
		<view class="part01 acea-row row-column" v-if="tabCurrent == 0">
			<view class="list" v-if="paike.length != 0">
				<view class="item acea-row row-middle row-between" v-for="(item,index) in paike" :key="index">
					<view class="left acea-row row-column">
						<text>{{item.kecheng}}</text>
						<text>{{item.start_date}} {{item.timefrom}} - {{item.timeto}}</text>
						<view class="paike_type">
							{{item.paike_type==1?'规则排课':'日历排课'}}
						</view>
					</view>
					<!-- <view class="btn" @click="">查看</view> -->
				</view>
			</view>
			<u-empty text="暂无排课" mode="order" margin-top="32" v-else></u-empty>
		</view>
		<view class="part02 acea-row row-column" v-if="tabCurrent == 1">
			<view class="list" v-if="studentList.length != 0">
				<view class="item acea-row row-middle" v-for="(item,index) in studentList" :key="index">
					<image :src="item.headimg?baseUrl+item.headimg:'../../../static/images/noticeDetail-student-default.png'" mode=""></image>
					<view class="content acea-row row-column">
						<text>{{item.stu_name}}</text>
						<text>剩余课时：{{item.left_lession}}</text>
					</view>
				</view>
				<view class="commonFooter"></view>
			</view>
			<u-empty text="暂无学员" mode="search" margin-top="32" v-else></u-empty>
		</view>
		<view class="part03" v-if="tabCurrent == 2">
			<u-calendar2 :date.sync="date" :rollcallList="rollcallList" activeBgColor="rgba(0,0,0,0.1)" activeColor="#303133"></u-calendar2>
		</view>
	</view>
</template>

<script>
	import request from '../../../api/request.js'
	import common from '../../../api/common.js'
	const app = getApp()
	export default{
		data(){
			return {
				baseUrl:app.globalData.baseUrl,
				common,
				id:"",
				tabList:[{
					name: '排课信息'
				}, {
					name: '班级学员'
				},{
					name: '点名情况'
				},{
					name: '测试信息'
				},{
					name: '测试信息'
				},{
					name: '测试信息'
				},{
					name: '测试信息'
				}],
				studentList:[],
				info:{}, //详情
				paike:[], //排课
				//有课&&点到true，有课&&未点到false,无课null
				// rollcallList:[false,true,null,null,false,null,null,null,null,null,
				// 			false,true,false,null,false,null,null,null,true,null,
				// 			false,true,false,null,false,null,null,null,null,null],
				rollcallList:[],
				tabCurrent:0,
				date:{}, // 日历参数
			}
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		created() {
		},
		methods:{
			init(){
				this.getClassDetail()
				this.getPaike()
				this.getStudent()
			},
			getStudent(){
				let data = {
					id:this.id,
					limit:9999
				}
				request.go((e)=>{
					this.studentList = e.data
				},'/Banji/getStudent',data,'POST')
			},
			getDianming(){
				let data = {
					id:this.id,
					start_date:this.date.start_date,
					jieshu_date:this.date.jieshu_date
				}
				this.rollcallList = this.date.list
				request.go((e)=>{
					let rollcallList = JSON.parse(JSON.stringify(this.date.list))
					for(let i of rollcallList){
						let f = e.data.find(o=>o.start_date == i.date)
						if(f){
							i.value = f.is_take == '1'?true:false
						}
					}
					this.rollcallList = rollcallList
				},'/Banji/takeName',data,'POST')
			},
			getClassDetail(){
				let data = {
					id:this.id
				}
				request.go((e)=>{
					this.info = e.data
				},'/Banji/view',data,'POST')
			},
			getPaike(){
				let data = {
					id:this.id,
					start_date:this.common.getDate().ymd,
					jieshu_date:this.common.getDate().ymdANDday(7)
				} 
				request.go((e)=>{
					this.paike = e.data
				},'/Banji/getPaike',data,'POST')
			}
		},
		watch:{
			date(e){
				this.getDianming()
			}
		}
	}
</script>

<style scoped>
	.class{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.class .info{
		background-color: #FFFFFF;
		padding: 48rpx 0 32rpx 64rpx;
	}
	.class .info .item{
		margin-bottom: 16rpx;
	}
	.class .info .item:last-of-type{
		margin-bottom: 0;
	}
	.class .info .title{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 52rpx;
	}
	.class .info .item text:nth-child(1){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 40rpx;
		display: block;
		width: 126rpx;
		margin-right: 32rpx;
	}
	.class .info .item text:nth-child(2){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .part01 .item{
		width: 686rpx;
		box-sizing: border-box;
		margin: 32rpx auto 0;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx;
	}
	.class .part01 .item{
		position: relative;
	}
	.class .part01 .item .left text:nth-child(1){
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 16rpx;
		display: block;
	}
	.class .part01 .item .left text:nth-child(2){
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
	}
	.class .part01 .item .left .paike_type{
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.class .part01 .item .btn{
		width: 116rpx;
		height: 52rpx;
		background: #1661ff;
		border-radius: 8rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
	}
	.class .part02 .item{
		width: 686rpx;
		height: 144rpx;
		box-sizing: border-box;
		margin: 32rpx auto 0;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx;
	}
	.class .part02 .item image{
		width: 80rpx;
		height: 80rpx;
		display: block;
		border-radius: 50%;
	}
	.class .part02 .item .content{
		margin-left: 32rpx;
	}
	.class .part02 .item .content text:nth-child(1){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 40rpx;
		margin-bottom: 8rpx;
		display: block;
	}
	.class .part02 .item .content text:nth-child(2){
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 32rpx;
	}
	.class .part03{
		width: 686rpx;
		margin: auto;
	}
</style>
